<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-8"> <ul class="navi"> <li><a href="#" title="">home</a></li> <li><a href="#" title="">home</a></li> <li><a href="#" title="">home</a></li> <li><a href="#" title="">home</a></li> <li><a href="#" title="">home</a></li> <li class="icon"><a href="#" onclick="a()">☰</a></li> </ul> </div>

body { margin:0; padding:0 0 0 0; } .main { margin: auto; padding:20px; width: 90%; } .navi { margin: 0; padding: 0; background-color: #000; } .navi li { display: inline-block; } .navi li a { display: inline-block; margin: 0; padding:20px; color: #fff; font-family: "arial"; font-size: 16px; text-transform: uppercase; font-weight: bold; -webkit-transition:1s; } .navi li a:hover{background-color: red;} .navi li.icon{display: none;} @media screen and (max-width: 768px){ .navi li:not(:first-child){display: none;} .navi{position: relative;} .navi li.icon{display: inline-block; position: absolute; right: 0; top: 0;} .icon.navi li{display:block;} .icon.navi li a{display:block; width: 100%;} }

<script> function a() { document.getElementsByClassName("navi")[0].classList.toggle("icon"); } </script>